<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 一般建议直接设置而不是--这样子是物理像素点更好确定分辨率 -->
    <canvas id="canvas" width="1024" height="700" style="border: 1px solid #999;display:block;margin: 0 auto;">
        当前浏览器不支持Canvas
    </canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('canvas');
            // canvas.width = 1024;
            // canvas.height = 1000;
            let context = canvas.getContext('2d');
            

            // stroke用于绘制线条
            // 使用beginPath 可以将当前的绘制状态只用于下一次的stroke，fill 
            context.beginPath();
            context.moveTo(100,100);
            context.lineTo(600,600);
            context.lineTo(100,600);
            context.lineTo(100,100);
            context.closePath();
            // 设置stroke样式
            context.lineWidth = 5;
            context.strokeStyle = "#005588";
            // 将之前的轨迹全部画出来
            context.stroke();
            
            // 填充
            context.fillStyle = "rgb(2,100,100)";//也支持rgb来表示颜色
            context.fill();
            

            context.beginPath();
            context.moveTo(400,400);
            context.lineTo(500,400);
            context.lineTo(500,500);
            context.lineTo(400,400);
            context.closePath();
            context.lineWidth = 1;
            context.strokeStyle = "#000";
            context.stroke();
        }
    </script>
</body>
</html>